<template>
	<div>
		<el-form :model="user" :rules="rules" class="login-container" ref="loginForm">
			<h3 class="login-title">系统登录</h3>
			<el-form-item prop="username">
				<el-input type="text" v-model="user.username" placeholder="账号"></el-input>
			</el-form-item>
			<el-form-item prop="password">
				<el-input type="password" v-model="user.password" placeholder="密码"></el-input>
			</el-form-item>
			<div style="display: flex;height: 20px;margin-bottom: 10px;">
				<img :src="imgUrl"><a href="#" style="margin-right: 110px;" @click="getCode()">看不清</a>
				<el-checkbox class="login-remember" v-model="remember">记住用户名</el-checkbox>
			</div>
			<el-form-item prop="checkCode">
				<el-input v-model="user.checkCode" placeholder="请输入验证码"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" style="width: 100%;" @click="login()">登录</el-button>
			</el-form-item>
			<el-form-item>
				<a href="#" @click="insert()">注册用户</a>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default{
		data(){
			let checkCodeValidate = (rule,value,callback)=>{
				let url = "user/checkCode";
				axios.post(url,`checkCode=${this.user.checkCode}`).then(resp=>{
					if(!resp.data){
						callback(new Error("验证码输入错误！"));
					}else{
						callback();
					}
				});
			};
			return {
				user:{
					username:'',
				},
				remember:false,
				imgUrl:'http://localhost:8089/user/getCode',
				rules:{
					username:[
					{required:true,message:'请输入用户名',trigger:['blur','change']},
					//{min:2,max:10,message:'用户名长度在2-10个字符之间',trigger:['blur','change']},
					{pattern:/^[a-zA-Z0-9_\u4e00-\u9fa5\u3400-\u4DB5]{2,10}$/,message:'用户名长度在2-10个字符之间'}
					],
					password:[
						{required:true,message:'请输入密码',trigger:['blur','change']},
						{min:3,max:20,message:'用户名长度在3-20个字符之间',trigger:['blur','change']},
					],
					checkCode:[
						{required:true,message:'请输入验证码',trigger:['blur','change']},
						{pattern:/^\w{4}$/,message:'验证码长度必须为4位',trigger:['blur','change']},
						{validator:checkCodeValidate,trigger:'blur'}
						
					]
				}
			}
		},
		methods:{
			login(){
				this.$refs["loginForm"].validate(valid=>{
					if(valid){
						let url = "user/login";
						axios.post(url,`username=${this.user.username}&password=${this.user.password}&checkCode=${this.user.checkCode}`).then(resp=>{
							if(resp && resp.data.result == "ok"){
								/* this.$message({
									message:"登录成功",
									type:"success"
								}); */
								
								this.$setSessionStorage("user",resp.data.data);
								
								
								if(this.remember){
									this.$setLocalStorage("username",this.user.username);
								}else{
									this.$removeLocalStorage("username");
								}
								this.$router.push("/mainpage")
							}
						});
					}
				})
			},
			getCode(){
				this.imgUrl = this.imgUrl+"?"+Math.random();
			},
			insert(){
				this.$router.push("/insert");
			},
		},
		created(){
			let username = this.$getLocalStorage("username");
			if(username){
				this.user.username = username;
				this.remember = true;
			}
		}
	}
</script>

<style scoped>
	.login-container{
		width: 350px;
		margin:100px auto 10px auto;
		border: 1px solid #eaeaea;
		padding:35px 35px 15px 35px;
		border-radius: 15px;
		box-shadow: 0 0 25px #cac6c6;
		
	}
	.login-title{
		text-align: center;
		color: #505458;
		margin: 0px auto 40px auto;
	}
	.login-remember{
		margin: 0px 0px 35px 0px;
	}
</style>